<template>
  <div>
    <h1>门店添加</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">门店名称</td>
          <td><input type="text" v-model="ojbInfo.Name" /></td>
        </tr>
        <tr>
          <td align="right">门店电话</td>
          <td><input type="text" v-model="ojbInfo.Phone" /></td>
        </tr>
        <tr>
          <td align="right">门店地址</td>
          <td><input type="text" v-model="ojbInfo.Address" /></td>
        </tr>
        <tr>
          <td align="right">是否启用</td>
          <td>
            <input type="radio" v-model="ojbInfo.State" name="Isno" :value="1" checked />是
            <input type="radio" v-model="ojbInfo.State" name="Isno" :value="0" />否
          </td>
        </tr>
        <tr>
          <td align="right">上传图片</td>
          <td><input type="file" :value="ojbInfo.Photo" @click="UpImg" /></td>
          <img :src="ojbInfo.Photo" alt="" width="100" height="100" />
        </tr>
        <tr>
          <td align="right"></td>
          <td><input type="button" value="添加" @click="ok" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import { ref, reactive } from "vue";

//1.上传图片
const UpImg = (e:any)=>{
  //将文件转换成FormData格式
  var obj = e.target.file[0];
  var f = new FormData();
  f.append('file',obj);
  //发送网络请求
  axios({
    url:'/api/UpImg/UpImg',
    method:'post',
    data:f
  })
  .then(res=>{
      console.log(res);
      alert('上传成功');
      ojbInfo.Phone = 'https://localhost:7142' + res.data.datas
  })
  .catch(arr=>{
    alert('上传失败');
  })
}

//添加对象
let ojbInfo = reactive({
  Name: "",
  Phone: "",
  Address: "",
  Photo: "",
  State: 0,
});


//添加
const ok= () =>{
  //1.
  if(ojbInfo.Phone == ''){
    alert("图片不可为空");
  }
  axios({
    url:'https://localhost:7142/api/Shop/ShopAdd',
    method:'post',
    data:ojbInfo
  })
  .then(res=>{
    alert('添加成功');
  })
  .catch(arr=>{
    alert("添加失败");
  })

}




</script>

<style scoped></style>
